<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 仓库数据
const warehouses = ref([])
const loading = ref(false)

// 获取仓库列表
const fetchWarehouses = async () => {
  try {
    loading.value = true
    // 这里可以调用仓库相关的API
    // const response = await getWarehouseList()
    // warehouses.value = response.data
  } catch (error) {
    console.error('获取仓库列表失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchWarehouses()
})
</script>

<template>
  <div class="warehouse-container">
    <div class="header">
      <h2>仓库管理</h2>
      <p>管理仓库信息和库存</p>
    </div>

    <div class="content">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>仓库列表</span>
            <el-button type="primary" size="small">新增仓库</el-button>
          </div>
        </template>

        <div v-if="loading" class="loading">
          <el-skeleton :rows="5" animated />
        </div>

        <div v-else class="warehouse-list">
          <el-empty v-if="warehouses.length === 0" description="暂无仓库数据" />
          <div v-else>
            <!-- 这里可以显示仓库列表 -->
            <p>仓库管理功能开发中...</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.warehouse-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  margin: 0 0 8px 0;
  color: #303133;
}

.header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.content {
  max-width: 1200px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loading {
  padding: 20px;
}

.warehouse-list {
  min-height: 200px;
}
</style>
